<script setup>
    import { ref } from "vue";

    import {useRoute} from "vue-router";

    import OrderCard from '@/components/OrderCard.vue';
    import useUserCart from "@/stores/cart/Cart.js";
    import useOrderStore from "@/stores/order/order.js";
    import { storeToRefs } from "pinia";
import router from "@/router";
    const useCart = useUserCart();
    const useOrder = useOrderStore();

    const route = useRoute();
    const {order}  = storeToRefs(useOrder);
    console.log(order); 

    const payOrder = (item,i) =>{

        if (item.deadline!==false) {
            router.push({
                name:"OrderConfirm",
                query:{shopName: item.name,from:"order",orderId:i}
            })
        }

        // console.log(order);

    }

    // const {cart} = useCart;
    // let shopOrder = ref();
    
    // console.log();
    // if (JSON.parse(route.query.orderConfirm)===true) {
    //     // console.log(cart);
    //     // order.value  = cart.list.find(item =>{return item.checked && item.name===route.query.name});
    //     // console.log(order);
    // }
    
//     let date =new Date();
//     let now = date.getTime();
//     console.log(now);
//     let dueTime = now+15*60;

//     let h = "00";
//     let m = ref(15);
//     let s = ref(0);

//    let timer = setInterval(()=>{
//         if (s.value===0) {
//             m.value--;
//             s.value=59;
//         }else{
//             s.value--;

//         }

//         if (s.value===0 && m.value===0) {
//             clearInterval(timer);
//         }
//     },1000)
    // console.log(now+15*60);
    // console.log(dueTime-now===15*60);
</script>

<template>
    <div class="order_list">
        <div class="order_list_header">我的订单</div>
        <div class="order_list_content">
            <div class="order_list_content_item" v-for="(OrderItem,index) in order" :key="OrderItem.name">
                <OrderCard :singleOrder="OrderItem" :index="index" @click="payOrder(OrderItem,index)"/>
                
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
@import "@/style/viriables.scss";
.order_list {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: .5rem;
    background-color: $dark-bgColor;
    overflow-y: scroll;

    &_header {
        padding: .08rem .18rem;
        font-size: .16rem;
        color: $content-fontcolor;
        text-align: center;
        line-height: .24rem;
        background-color: $bgColor;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
    }

    &_content {
        margin-top: .58rem;
    }
}
</style>